<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Query Page</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div class="container my-5">
    <h1 class="mb-4">Query Page</h1>
    <form id="queryForm" class="mb-4">
        <div class="form-row">
            <div class="form-group col-md-4">
                <label for="field1">Field 1</label>
                <input type="text" class="form-control" id="field1" name="field1">
            </div>
            <div class="form-group col-md-4">
                <label for="field2">Field 2</label>
                <input type="text" class="form-control" id="field2" name="field2">
            </div>
            <div class="form-group col-md-4">
                <label for="field3">Field 3</label>
                <input type="text" class="form-control" id="field3" name="field3">
            </div>
        </div>
        <button type="submit" class="btn btn-primary">Search</button>
    </form>
    <table id="resultTable" class="table table-striped table-hover">
        <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
        </thead>
        <tbody></tbody>
    </table>
    <div id="pagination" class="pagination"></div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
    $(document).ready(function() {
        $('#queryForm').submit(function(e) {
            e.preventDefault();
            var formData = $(this).serialize();
            $.ajax({
                type: 'POST',
                url: 'your_backend_url',
                data: formData,
                dataType: 'json',
                success: function(response) {
                    updateTable(response.data);
                    updatePagination(response.totalPages, response.currentPage);
                },
                error: function(xhr, status, error) {
                    console.error(error);
                }
            });
        });
    });

    function updateTable(data) {
        var tableBody = $('#resultTable tbody');
        tableBody.empty();
        data.forEach(function(row) {
            var tr = $('<tr>');
            tr.append($('<td>').text(row.column1));
            tr.append($('<td>').text(row.column2));
            tr.append($('<td>').text(row.column3));
            tableBody.append(tr);
        });
    }

    function updatePagination(totalPages, currentPage) {
        var paginationDiv = $('#pagination');
        paginationDiv.empty();
        var pagination = $('<nav>').append($('<ul>').addClass('pagination'));
        for (var i = 1; i <= totalPages; i++) {
            var li = $('<li>').addClass('page-item');
            if (i === currentPage) {
                li.addClass('active');
            }
            var a = $('<a>').addClass('page-link').attr('href', '#').text(i);
            li.append(a);
            pagination.find('ul').append(li);
        }
        paginationDiv.append(pagination);
    }
</script>
</body>
</html>